<template>
  <div >
    <el-radio-group style="margin: 20px 0 10px 0" v-model="formConfig.ruleType">
      <el-radio label="SIMPLE">简单模式</el-radio>
      <el-radio label="SCRIPT">高级模式</el-radio>
    </el-radio-group>
    <template v-if="formConfig.ruleType === 'SIMPLE'">
      <div class="w-add-rule" @click="addRule">
        + 添加联动规则
      </div>
      <div>
        <div class="w-form-rule" v-for="(rule, i) in formConfig.rules" :key="'rule_' + i" @click="editRule(i, rule)">
          <div class="w-form-rule-content"></div>
          <el-icon class="icon" @click.stop="removeRule(i)"><Close /></el-icon>
          <div>{{'规则 ' + (i + 1)}}</div>
        </div>
      </div>

    </template>
    <el-button v-else @click="addRule" style="margin-top: 10px;" :icon="SetUp">使用JS控制联动</el-button>
    <w-dialog v-model="ruleDialog" :title="`${isAddRule ? '新增':'编辑'}表单联动规则`" @ok="confirmRule">
      <template v-if="formConfig.ruleType === 'SIMPLE'">
        <el-alert type="success" description="当满足如下条件关系时，执行下方一系列联动动作" close-text="知道了" style="margin-bottom: 10px"/>
        <condition-config class="w-rule-conditions" :form-items="formItems" v-model="selectedRule.condition"/>
        <action-config :options="formItems" v-model="selectedRule.action.with" add-text="添加动作（满足条件时执行）"/>
        <action-config :options="formItems" v-model="selectedRule.action.other" add-text="添加动作（不满足条件时执行）"/>
      </template>
      <template v-else>
        <code-editor v-model="formConfig.ruleJs"/>
      </template>
    </w-dialog>
  </div>
</template>

<script>
import ConditionConfig from "/@/views/setting/workflow/config/subs/ConditionConfig.vue";
import ActionConfig from '/@/views/setting/workflow/config/subs/ActionConfig.vue'
import CodeEditor from '/@/views/setting/workflow/common/CodeEditor.vue'
import { SetUp, Close } from '@element-plus/icons-vue'
import { computed, reactive, toRefs } from 'vue';
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'
import { deepCopy } from '/@/utils/utils'

export default {
    name: 'FormConfig',
    components: {
      ConditionConfig,
      CodeEditor,
      ActionConfig,
      Close
    },
    setup(props, context) {

    const storesWorkFlowConfig = useWorkFlowConfig()
    const workFlowConfig = storeToRefs(storesWorkFlowConfig)
      const state = reactive({
        ruleDialog: false,
        activeName: 'base',
        isAddRule: true,
        selectedRuleIndex: null,
        selectedRule: {condition: {}, action: {}},
        ruleProps: {
          condition: {
            logic: true,
            condition: {
              field: null,
              fieldType: null,
              compare: null,
              fixed: true,
              compareVal: []
            },
            children: []
          },
          action: {
            with: [//满足条件时执行
              {
                targets: [],
                type: null,
                value: null
              }
            ],
            other: [//不满足条件时执行
              {
                targets: [],
                type: null,
                value: null
              }
            ],
          }
        },
        formConfig: {
            //数据字段
            data: {},
            //校验规则
            rules: {},
            ruleType: 'SIMPLE'
        }
      })
      const formItemMap = computed({
        get: () => {
          return workFlowConfig.formItemMap
        },
        set: val => {
          storesWorkFlowConfig.setformItemMap(val)
        }
      })
      const formItems = computed(() => {
        const items = []
        formItemMap.value = new Map()
        workFlowConfig.design.value.formItems.forEach(item => {
          loadItems(items, item)
        })
        return items
      })
      const loadItems = (items, item, alisa) => {
        console.log(formItemMap.value)
        return 
        formItemMap.value.set(item.id, item)
        if (item.name === 'SpanLayout'){
          item.props.items.forEach(it => loadItems(items, it))
        }else if (item.name === 'TableList'){
          items.push(item)
          item.props.columns.forEach(it => {
            loadItems(items, it, `${item.title}.${it.title}`)
          })
        }else {
          items.push({
            id: item.id,
            name: item.name,
            title: alisa || item.title,
            valueType: item.valueType,
            props: item.props
          })
        }
      }
      const addRule = () => {
        state.isAddRule = true
        state.selectedRule = deepCopy(state.ruleProps)
        state.ruleDialog = true
      }
      const editRule = (i, rule) => {
        state.isAddRule = false
        state.ruleDialog = true
        state.selectedRuleIndex = i
        state.selectedRule = deepCopy(rule)
      }
      const removeRule = (i) => {
        state.formConfig.rules.splice(i, 1)
      }
      const confirmRule = () => {
        if (state.isAddRule){
          state.formConfig.rules.push(state.selectedRule)
        }else {
          state.formConfig.rules[state.selectedRuleIndex] = state.selectedRule
        }
        state.ruleDialog = false
      }
      return {
        ...toRefs(state),
        SetUp,
        formItemMap,
        formItems,
        loadItems,
        addRule,
        editRule,
        removeRule,
        confirmRule
      }
    }
}
</script>

<style lang="scss" scoped>
.w-add-rule{
  padding: 5px;
  text-align: center;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  border: 2px dashed #E8E8E8;
  &:hover {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
}

.w-form-rule {
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  background: white;
  cursor: pointer;
  position: relative;
  border: 1px solid white;
  &:hover {
    box-shadow: 0 0 10px 0 #E8E8E8;
    transition: box-shadow 0.5s;
    border: 1px dashed var(--el-color-primary);
  }
  .icon {
    position: absolute;
    right: -8px;
    top: -10px;
    padding: 5px;
    border-radius: 50%;
    background: white;
    &:hover{
      color: var(--el-color-danger);
    }
  }
}

// .w-rule-conditions{

// }
</style>